<template>
	<view>
		<view v-if="!flag">
			<view class="title">
				<text>您要举报的内容是？</text>
				<text>请告诉我们，我们将更加完善</text>
			</view>
			<view>
				<view class="list" v-for="(item,index) in list" @click="selectRemark(item)">
					<text>{{item.remark}}</text>
					<image src="http://images.linglinggong.net/icon3/jiantou.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view v-if="flag">
			<text class="jb-title">举报内容</text>
			<view class="jb-remark"><text>{{remark}}</text></view>
			<text class="jb-title">补充描述</text><text class="jb-title-bs"
				:style="{color:remark=='其他'?'#FE4B28':'#1A1A1A'}">{{remark=='其他'?'(必填)':''}}</text>
			<view class="jb-info">
				<textarea v-model="jbInfo" placeholder="请描述您的举报场景，时间，内容等" maxlength="100" />
			</view>
			<view :class="jbInfo==''&&remark=='其他'?'button-no':'button'"
				@click="jbInfo==''&&remark=='其他'?'':buttonClick()">提交</view>
		</view>
	</view>
</template>
<script>
	import unit from '../../libs/newUnit.js'
	export default {
		data() {
			return {
				list: [],
				orderId: 0,
				flag: false,
				remark: '',
				jbInfo: '',
				selectList: [],
			}
		},
		methods: {
			selectRemark(v) {
				if (this.remark != v.remark) {
					this.jbInfo = ''
				}
				this.remark = v.remark
				this.selectList = v
				this.flag = true
			},
			buttonClick() {
				unit.order_report_id(this.orderId, this.jbInfo, this.selectList.dictSort).then(v => {
					uni.showToast({
						title: v.msg,
						icon: 'none'
					})
					setTimeout(() => {
						this.flag = false
						uni.navigateBack({
							delta: 1
						})
					}, 800)
				})
			},
			async jubaoliyou() {
				let res = await this.$fetch(this.$api.cancel_dictValue, {
					dictType: 'report'
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.list = res.data
			}
		},
		onLoad(value) {
			this.orderId = value.orderId
			this.jubaoliyou()
		},
		onBackPress() {
			if (this.flag) {
				this.flag = false
				return true
			} else {
				return false
			}
		},
	}
</script>
<style lang="less" scoped>
	.title {
		margin-top: 40rpx;
		margin-bottom: 28rpx;
		width: 750rpx;
		height: 80rpx;
		background: #F2F2F2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		&>text:nth-child(1) {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1A1A1A;
			line-height: 36rpx;
		}

		&>text:nth-child(2) {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 24rpx;
		}
	}

	.list {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #F5F5F5;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		&>text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 88rpx;
			margin-left: 30rpx;
		}

		&>image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 30rpx;
			transform: rotate(90deg);
		}
	}

	.jb-title {
		display: inline-block;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1A1A1A;
		line-height: 32rpx;
		margin: 36rpx 0 36rpx 30rpx;
	}

	.jb-remark {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;

		&>text {
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1A1A1A;
			line-height: 88rpx;
		}
	}

	.jb-info {
		width: 750rpx;
		height: 400rpx;
		background: #FFFFFF;

		&>textarea {
			width: 690rpx;
			height: 340rpx;
			padding: 30rpx;
			font-size: 28rpx;
		}
	}

	.jb-title-bs {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 32rpx;
	}

	.button-no {
		position: fixed;
		bottom: 72rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 88rpx;
		background: #ABABAB;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}

	.button {
		position: fixed;
		bottom: 72rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 88rpx;
		background: #FCC928;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #402110;
		line-height: 88rpx;
		text-align: center;
	}
</style>